<template>
  <div class="cashOut">
      <header-bar title="提现到支付宝"></header-bar>
      <div class="cashOut-body">
          <div class="pannel">
              <div class="balance">
                  <p>账户余额：</p>
                  <p>{{amountTotal |amountFormat}}元</p>
              </div>
              <div class="cashOut-input px1bb" @click="showKeyboard">
                  <span>¥</span>
                  <div class="val-bg">
                    <span class="init-val">{{form.amount}}</span>
                    <key-cursor class="cursor_input" v-if="numberKeyboardFlag"></key-cursor>
                  </div>
                  
                  <button @click.stop="cashAll">全部提现</button>
              </div>
              <div class="tips">*每个支付宝账号，每日只能提现{{extractLimitNum}}次</div>
          </div>
      </div>
      <ul class="cashOut-items">
          <li>
              <div>姓名</div>
              <input type="text" v-model="form.realName" placeholder="请输入真实姓名">
          </li>
          <li>
              <div>支付宝账号</div>
              <input type="text" v-model="form.accountNo" placeholder="请输入支付宝账号(邮箱或手机号)">
          </li>
      </ul>
      <div class="btn_bg">
          <div class="btn btn_green medium" :class="{'disabled':!btnFlag}" @click="cashOut">确认提现</div>
      </div>
      <!-- <numberKeyboard v-if="show" ref="numberKeyboard" :focusFlag="true" :focus.sync="numberKeyboardFlag" :point="true" :closeModal="true" @confirmEvent="confirmEvent" :max-length="16" @error="handlerError"></numberKeyboard> -->

 
      <div class="hook_toast" v-if="model">
          <img src="@/assets/imgs/common/hook_icon.png">
          <div class="hook_right">
              <p>提现申请成功</p>
              <p>预计2小时内到账</p>
          </div>
      </div>
      <div class="hook_toast_bg" v-if="model"></div>
       <pop :visible.sync="show" backgroundColor="transparent">
           <div class="fixend">
               <numberKeyboard  ref="numberKeyboard" :focus="true" :point="true" @close="closePanel" @confirm="confirm" @keyClick="keyClick" :max-length="16" ></numberKeyboard>
           </div>
       </pop>
  </div>
</template>

<script>
import HeaderBar from 'components/header.vue'
// import numberKeyboard from '@/components/numberKeyboard.vue'
import numberKeyboard from '@/components/numberKeyboard2.vue'
import pop from '@/components/pop.vue'
import keyCursor from '@/components/keyCursor.vue';
import { mapState, mapActions } from 'vuex'
export default {
    components: {
        HeaderBar,
        numberKeyboard,
        keyCursor,
        pop,
    },
    data() {
        return {
            show:true,
            model:false,
            numberKeyboardFlag: true,
            amountTotal:'',
            form:{
                amount:'',
                realName:'',
                accountNo:'',
            },
            extractLimitNum:''
        }
    },
    created() {
        this.amountTotal = this.$route.query.amount;
        this.extractLimitNum = this.$route.query.extractLimitNum;
    },
    mounted() {
        this.$refs.numberKeyboard.setValue('');
    },
    computed: {
        btnFlag(){
            if(this.form.amount&&this.form.realName&&this.form.accountNo){
                if(!(this.form.amount*1)){
                    return false;
                }
                //手机
                let regph=/^[1][1-9][0-9]{9}$/;
                //邮箱
                let regemail=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                if(regph.test(this.form.accountNo)){
                    return true;
                }else if(regemail.test(this.form.accountNo)){
                    return true;
                }else{
                    return false;
                }
            }else{
                return false;
            }
        }
    },
    methods: {
        ...mapActions(['showMsg', 'toggleLoading', 'updataLoadingZIndex']),
        confirmEvent(val) {
            this.form.amount = val;
        },
        confirm() {
            this.show = false;
        },
        closePanel(){
            this.show = false;
        },
        keyClick(val) {
            this.form.amount = val;
        },
        handlerError(err){
            this.showMsg({content:err});
        },
        showKeyboard(){
            this.show = true;
            this.numberKeyboardFlag = true;
            this.$nextTick(()=>{
                this.$refs.numberKeyboard.setValue(this.form.amount);
            })
        },
        cashAll(){
            this.form.amount = this.amountTotal;
        },
        cashOut(){
            if(!this.btnFlag){
                return false;
            }
            this.toggleLoading({flag:true});
            this.$ajax.extractApply(this.form).then(res=>{
                this.toggleLoading({flag:false});
                if(res.code=='0000'){
                    // this.showMsg({ content: '提现申请成功，预计2小时内到账!'});
                    this.model = true;
                    setTimeout(()=>{
                        this.model = false;
                        this.$router.back();
                    },1500);
                    
                }
            })
        }
    },
}
</script>

<style lang="less" scoped>
    .cashOut{
        min-height: 100%;
        background: #F6F6F6;
        .cashOut-body{
            background: #fff;
            padding: 0 .32rem;
            .pannel{
                .balance{
                    padding: .5rem 0 .18rem;
                    display: flex;
                    p{
                        &:nth-child(1){
                            color: #999;
                        }
                        &:nth-child(2){
                            color: #333;
                        }
                    }
                }
                .cashOut-input{
                    display: flex;
                    align-items: flex-end;
                    // border-bottom: 1px solid #DDD;
                    position: relative;
                    padding-right: 1.36rem;
                    &::after{
                        background-color: #ddd;
                    }
                    span{
                        font-size: .48rem;
                        color: #323746;
                        margin-bottom: .2rem;
                        font-family: din-bold;
                    }
                    .val-bg{
                        display: flex;
                        align-items: center;
                        height: 1.1rem;
                    }
                    .init-val{
                        color: #333333;
                        font-size: .8rem;
                        margin-bottom: 0;
                        margin-left: .16rem;
                        height: 1rem;
                        max-width: 4.8rem;
                        overflow: hidden;
                        font-family: din-bold;
                    }
                    .cursor_input{
                        height: .7rem;
                    }
                    button{
                        font-size: .24rem;
                        color: #14C877;
                        background: #e7f9f1;
                        width: 1.36rem;
                        height: .48rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: .48rem;
                        position: absolute;
                        right: 0;
                        top: 50%;
                        margin-top: -.24rem;
                    }
                }
                .tips{
                    font-size: .24rem;
                    color: #999;
                    padding: .2rem 0 .3rem;
                }
            }
        }
        .cashOut-items{
            li{
                margin-top: .2rem;
                background: #fff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: .96rem;
                padding: .4rem;
                div{
                    font-size: .28rem;
                    color: #333;
                    width: 1.8rem;
                }
                input{
                    color: #333;
                    flex: 1;
                    font-size: .28rem;
                    &::placeholder{
                        color: #CCC;
                    }
                }
            }
        }
        .btn_bg{
            margin-top: 1.2rem;
        }
        .hook_toast{
            display: flex;
            align-items: center;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            background:rgba(0,0,0,0.6);
            border-radius:.04rem;
            width: 3.08rem;
            height: 1.08rem;
            padding: 0 .2rem;
            &>img{
                width: .48rem;
                height: .48rem;
                margin-right: .1rem;
            }
            .hook_right{
                p{
                    &:nth-child(1){
                        font-size: .28rem;
                        color: #fff;
                    }
                    &:nth-child(2){
                        font-size: .24rem;
                        color: #CCC;
                    }
                }
            }
        }
        .hook_toast_bg{
            position: fixed;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
        }
        .fixend{
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
        }
    }
</style>